<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Beautiful design tables in HTML in the style of a zebra.</title>
    <link rel="stylesheet" href="css/report.css" type="text/css">
    <link rel="stylesheet" href="css/menu.css" type="text/css">
    <link rel="stylesheet" href="css/daterangepicker.css" type="text/css">
    <script type="text/javascript"
            src="js/moment.js"></script>
    <script type="text/javascript"
            src="js/daterangepicker.js"></script>
</head>
<script type="text/javascript">
    $("#saleGoodsDateRange").daterangepicker(defaults,
            function (start, end, label) {
                var pattern = 'YYYY-MM-DD';
                if(this.timePicker){
                    pattern = 'YYYY-MM-DD HH:mm'
                }
                if (this.singleDatePicker) {
                    $('#saleGoodsDateRange input').val(start.format(pattern));
                } else {
                    $('#saleGoodsDateRange input').val(start.format(pattern) + ' 至 ' + end.format(pattern));
                }
            });
</script>
<body>
<ul id="menu">
    <li><a href="#">&#35746;&#21333;</a></li>
    <li><a href="#">&#25253;&#34920;</a></li>
    <li><a href="#">&#21830;&#21697;</a></li>
    <li><a href="#">&#20195;&#29702;</a></li>
    <li><a href="#">&#35268;&#26684;</a></li>
    <li><a href="#">&#28155;&#21152;&#35746;&#21333;</a></li>
    <li><a href="#">&#28155;&#21152;&#21830;&#21697;</a></li>
    <li><a href="#">&#28155;&#21152;&#20195;&#29702;</a></li>
    <li><a href="#">&#28155;&#21152;&#35268;&#26684;</a></li>

    <li style="float:right;text-align: center">User:<span>yumei</span></li>
</ul>
<div id="container">

    <table class="zebra">
        <caption>&#35746;&#21333;&#21015;&#34920;</caption>
        <%--<div id="saleGoodsDateRange" class="date-range-box">
            <input type="text" id="saleGoodsRangeText"  class="form-control " name="daterange" />
        </div>--%>
        <thead>
        <tr>
            <th>Date</th>
            <th>Start time</th>
            <th>End time</th>
            <th>Name</th>

        </tr>
        </thead>
        <tbody>
        <tr>
            <td>02.06.2010</td>
            <td>10:00</td>
            <td>12:00</td>
            <td>Cleaning</td>
        </tr>
        <tr>
            <td>02.06.2010</td>
            <td>12:00</td>
            <td>15:00</td>
            <td>Training</td>
        </tr>
        <tr>
            <td>02.06.2010</td>
            <td>15:00</td>
            <td>17:00</td>
            <td>Rest</td>
        </tr>
        <tr>
            <td>02.06.2010</td>
            <td>17:00</td>
            <td>21:00</td>
            <td>Work</td>
        </tr>
        <tr>
            <td>02.06.2010</td>
            <td>21:00</td>
            <td>07:00</td>
            <td>Sleep</td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>